<template>
  <div style=" background: #fefefe;min-height: 667px">
    <top-bar title="添加推荐内容" bgc="background-color:#fff"></top-bar>
    <van-form form="addForm" ref="formRef" @submit="addClick" @failed="onFailed">
      <van-uploader
        style="margin-left: 30px;"
        v-model="addForm.fileList"
        :before-read="beforeRead"
        :after-read="afterRead"
        multiple
        :max-count="9"
      />
      <van-cell>
        <van-field
          v-model="addForm.rectopic"
          class="topic"
          name="topic"
          placeholder="填写标题会有很多的人点赞哦~"
          :rules="[{required: true, message: '请输入标题'}, {validator: iptValidator, message: '标题字数控制在6~20字之间'}]"
        />
      </van-cell>
      <van-cell>
        <van-field
          v-model="addForm.reccontent"
          type="textarea"
          rows="6"
          autosize
          maxlength="1000"
          show-word-limit
          placeholder="添加正文"
          :rules="[{required: true, message: '请输入正文'}]"
        />
      </van-cell>
      <van-cell title="参与话题" :value="addForm.joinTopic" icon="hot-o" is-link @click="toTopic" />
      <div style="margin: 60px;">
        <van-button round block type="danger" native-type="submit">添 加</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import MyList from "./component/list";
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";

export default {
  components: {
    MyList,
    TopBar
  },
  data() {
    return {
      addForm: {
        fileList: [],
        reccontent: ""
      }
    };
  },
  mounted() {
    this.$set(this.addForm, "joinTopic", this.joinTopic.name);
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo,
      joinTopic: state => state.joinTopic
    })
  },
  methods: {
    addClick() {
      let recImage = [];
      this.addForm.fileList.length > 0 &&
        this.addForm.fileList.forEach(item => {
          recImage.push(item.url);
        });
      let form = {
        number: this.userInfo.number,
        username: this.userInfo.username,
        avatar: this.userInfo.avatar || "",
        rectopic: this.addForm.rectopic,
        reccontent: this.addForm.reccontent,
        recImage,
        joinTopic: this.addForm.joinTopic || "",
        createTime: new Date().getTime()
      };
      this.$api.post("/api/recommend/add", form).then(res => {
        this.$message({
          type: "success",
          message: "添加完成"
        });
        this.$router.push({ name: "recommendlist" });
      });
    },
    // 返回布尔值
    beforeRead(file) {
      let isJPG = file.type === "image/jpeg";
      let isPNG = file.type === "image/png";
      let isPG = isJPG || isPNG;
      if (!isPG) {
        this.$message.error("请上传 jpg png 格式图片, 一次只能一张");
      }
      return isPG;
    },
    afterRead(file) {
      console.log(file.file, "file");
      let formData = new FormData();
      formData.append("image", file.file);
      this.$api.post("/api/recommend/upload", formData).then(res => {
        let obj = res.data;
        obj.url = obj.path;
        this.addForm.fileList.pop();
        this.addForm.fileList.push(obj);
      });
    },
    iptValidator(val) {
      return val.length > 5 && val.length < 21;
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo.errors[0].message);
      this.$message({
        type: "error",
        message: errorInfo.errors[0].message
      });
    },
    toTopic() {
      this.$router.push({ name: "jointopiclist" });
    }
  }
};
</script>

<style scoped>
::-webkit-input-placeholder {
  color: #555555;
  font-weight: 400;
}
.topic {
  color: #555555;
  font-weight: bold;
  font-size: 18px;
  height: 40px;
  line-height: 30px;
}
</style>